<template>
  <div class="pay-info-wrap">
    <div class="pay-info-card">
      <h2>缴费</h2>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin: 24px 0;"
        empty-text="暂无数据"
      >
        <el-table-column prop="id" label="id" width="60" align="center" />
        <el-table-column prop="roomCode" label="房间号" width="100" align="center" />
        <el-table-column prop="bedCode" label="床位号" width="100" align="center" />
        <el-table-column prop="name" label="病人" width="120" align="center" />
        <el-table-column prop="total" label="费用合计" width="120" align="center" />
        <el-table-column
          prop="isPay"
          label="缴费状态"
          width="120"
          align="center"
        >
          <template #default="scope">
            <span :style="{ color: scope.row.isPay === 0 ? 'red' : 'green' }">
              {{ scope.row.isPay === 0 ? '未交' : '已交' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="200"
        >
          <template #default="scope">
            <el-link type="primary" @click="viewDetail(scope.row)">查看费用明细</el-link>
            <el-link
              v-if="scope.row.isPay === 0"
              type="success"
              class="pay-btn"
              @click="payNow(scope.row)"
            >立即缴费</el-link>
          </template>
        </el-table-column>
      </el-table>
    
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/api/http.js'
import { useRouter } from 'vue-router'

interface PayInfoItem {
  id: number
  roomCode: string
  bedCode: string
  patientCode: string
  name: string
  totalPay: number
  payTime: string
  isPay: number
}

const tableData = ref<PayInfoItem[]>([])
const partientCode = 3
const router = useRouter()
const getPayInfo = () => {
  http.get(`api/Patient/GetPayInfo?partientCode=${partientCode}`).then(res => {
    if (res && res.data) {
      tableData.value = res.data
    } else {
      ElMessage.error('获取数据失败')
    }
  }).catch(() => {
    ElMessage.error('请求出错')
  })
}

const viewDetail = (row: PayInfoItem) => {
  router.push({ path: '/PayInfoItem', query: { payInfoId: row.id } })
}

const payNow = (row: PayInfoItem) => {
  router.push({ name: 'PayFindInfo', params: { id: row.id } })
}

onMounted(() => {
  getPayInfo()
})
</script>

<style scoped>
.pay-info-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7fafd;
}
.pay-info-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  padding: 36px 32px 24px 32px;
  min-width: 900px;
  max-width: 1200px;
}
h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 2px;
}
.desc {
  margin-top: 18px;
  color: #888;
  text-align: center;
  font-size: 15px;
}
.pay-btn {
  margin-left: 18px;
}
</style>